// 入口文件
import Vue from 'vue'

// 导入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入 vue-resource 
import VueResource from 'vue-resource'
Vue.use(VueResource)

// 设置请求根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005';
// 全局设置 post 时候的表单格式
Vue.http.options.emulateJSON = true;

// 导入 MUI
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

// 导入 Mint-UI 
import { Header,Swipe,SwipeItem,Button} from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.component(Header.name,Header)
Vue.component(Swipe.name,Swipe)
Vue.component(SwipeItem.name,SwipeItem)
Vue.component(Button.name,Button)

// 图片懒加载指令
import MintUI from 'mint-ui'
Vue.use(MintUI)

// 导入 App 组件
import app from './App.vue'
// 导入 自定义路由模块 router.js 
import router from './router.js'

// 导入格式化时间插件
import moment from 'moment'
// 定义全局过滤器
Vue.filter('dateFormat',function (DataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
    return moment(DataStr).format(pattern)
})

// 导入 Vuex 
import Vuex from 'vuex'
Vue.use(Vuex)

// 每次进入网站，会调用 main.js ，在刚调用的时候，先从本地存储中，把购物车的数据读出来，放到store中
var car = JSON.parse(localStorage.getItem('car') || '[]')

var store = new Vuex.Store({
    state: {  // this.$store.state.***
        car: car  //将 购物车中的商品数据，用一个数组存储起来，在 car 数组中，存储一些商品的对象，将这个商品对象设计成：{id：商品的id，count：要购买的数量，price：商品的单价，selected：false}
    },
    mutations: {  // this.$store.commit('')
    // 点击加入购物车，把商品信息，保存到 store 中的 car 上
    // 分析：
    // 1. 如果购物车中，之前就已经有了对应的商品，那么只需要更新数量
    // 2. 如果没有，则把 商品数据 ，push 到 car 中即可
        addToCar(state,goodsinfo) {
            // 先假设 在购物车中，没有找到 对应的商品
            var flag = false;
            state.car.some(item => {
                if(item.id == goodsinfo.id){
                    item.count += parseInt(goodsinfo.count)
                    flag = true
                    return true
                }
            })
            // 如果最终，循环完毕，得到的 flag 仍是 flase，将 goodsinfo 中的数据 push 到 car 中
            if(!flag){
                state.car.push(goodsinfo)
            }
            // 当更新 car 之后，把 car 数据，存储到本地的 localStorage 中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        // 修改购物车中的数量
        updateGoodsInfo(state,goodsinfo) {
            state.car.some(item => {
                if(item.id == goodsinfo.id){
                    item.count = parseInt(goodsinfo.count)
                    return true
                }
            })
            // 当修改完商品的数量，把最新的 购物车数据 保存到本地存储中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        removeFormCar(state,id) {
            state.car.some((item,i) => {
                if(item.id == id){
                    state.car.splice(i, 1)
                    return true;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        // 购物车商品的状态保存到 store 中去
        updateGoodsSelected(state, info) {
            state.car.some(item => {
                if(item.id == info.id){
                    item.selected = info.selected
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        
    },
    getters: {
        getAllCount(state) {
            var c = 0;
            state.car.forEach(item => {
                c = c + item.count
            })
            return c;
        },
        // 从购物车 中获取 商品的 数量
        // 1. 创建一个空对象，然后循环 购物车中所有商品的数据，把 当前循环这条商品的 id 作为对象的属性名，count值作为对象的属性值，这样把所有的商品循环一遍，就会得到一个对象：{88:2,89:1,90:1}
        getGoodsCount(state) {
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.count 
            })
            return o;
        },
        getGoodsSelected(state) {
            var o = {}
            state.car.forEach(item => {
                o[item.id] = item.selected
            })
            return o
        },
        getGoodsCountAndAmount(state) {
            var o = {
                count: 0,
                amount: 0
            };
            state.car.forEach(item => {
                if(item.selected){
                    o.count += item.count
                    o.amount += item.price * item.count
                }
            })
            return o;
        }
    }
})

// 导入图片预览插件 vue-preview
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router, //挂载路由对象到 vm 上
    store
})
